<template>
  <div class="encrypt-page">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>加密解密工具</el-breadcrumb-item>
        </el-breadcrumb>
        <h2 style="margin-bottom: 20px; color: #303133;">加密解密工具</h2>
      </el-col>
    </el-row>

    <el-tabs v-model="activeTab" type="card">
      <!-- MD5加密 -->
      <el-tab-pane label="MD5加密" name="md5">
        <el-card>
          <el-form :model="md5Form" label-width="100px">
            <el-form-item label="输入文本">
              <el-input
                v-model="md5Form.input"
                type="textarea"
                :rows="4"
                placeholder="请输入要加密的文本"
                @input="generateMD5"
              />
            </el-form-item>
            <el-form-item label="加密结果">
              <el-input
                v-model="md5Form.output"
                type="textarea"
                :rows="4"
                readonly
                placeholder="MD5加密结果将在这里显示"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="copyToClipboard(md5Form.output)">
                复制结果
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- Base64编码解码 -->
      <el-tab-pane label="Base64编码解码" name="base64">
        <el-card>
          <el-form :model="base64Form" label-width="100px">
            <el-form-item label="操作类型">
              <el-radio-group v-model="base64Form.mode" @change="handleBase64">
                <el-radio label="encode">编码</el-radio>
                <el-radio label="decode">解码</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="输入内容">
              <el-input
                v-model="base64Form.input"
                type="textarea"
                :rows="4"
                :placeholder="base64Form.mode === 'encode' ? '请输入要编码的文本' : '请输入要解码的Base64字符串'"
                @input="handleBase64"
              />
            </el-form-item>
            <el-form-item label="输出结果">
              <el-input
                v-model="base64Form.output"
                type="textarea"
                :rows="4"
                readonly
                :placeholder="base64Form.mode === 'encode' ? 'Base64编码结果' : '解码结果'"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="copyToClipboard(base64Form.output)">
                复制结果
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- URL编码 -->
      <el-tab-pane label="URL编码" name="url">
        <el-card>
          <el-form :model="urlForm" label-width="100px">
            <el-form-item label="操作类型">
              <el-radio-group v-model="urlForm.mode" @change="handleUrl">
                <el-radio label="encode">编码</el-radio>
                <el-radio label="decode">解码</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="输入内容">
              <el-input
                v-model="urlForm.input"
                type="textarea"
                :rows="4"
                :placeholder="urlForm.mode === 'encode' ? '请输入要编码的URL' : '请输入要解码的URL'"
                @input="handleUrl"
              />
            </el-form-item>
            <el-form-item label="输出结果">
              <el-input
                v-model="urlForm.output"
                type="textarea"
                :rows="4"
                readonly
                :placeholder="urlForm.mode === 'encode' ? 'URL编码结果' : '解码结果'"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="copyToClipboard(urlForm.output)">
                复制结果
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import CryptoJS from 'crypto-js'
import { Base64 } from 'js-base64'

const route = useRoute()
const activeTab = ref('md5')

// 根据URL参数设置活动标签页
onMounted(() => {
  const tab = route.query.tab
  if (tab && ['md5', 'base64', 'url'].includes(tab)) {
    activeTab.value = tab
  }
})

// MD5表单
const md5Form = reactive({
  input: '',
  output: ''
})

// Base64表单
const base64Form = reactive({
  input: '',
  output: '',
  mode: 'encode'
})

// URL表单
const urlForm = reactive({
  input: '',
  output: '',
  mode: 'encode'
})

// 生成MD5
const generateMD5 = () => {
  if (md5Form.input) {
    md5Form.output = CryptoJS.MD5(md5Form.input).toString()
  } else {
    md5Form.output = ''
  }
}

// 处理Base64
const handleBase64 = () => {
  if (!base64Form.input) {
    base64Form.output = ''
    return
  }
  
  try {
    if (base64Form.mode === 'encode') {
      base64Form.output = Base64.encode(base64Form.input)
    } else {
      base64Form.output = Base64.decode(base64Form.input)
    }
  } catch (error) {
    base64Form.output = '解码失败，请检查输入格式'
  }
}

// 处理URL编码
const handleUrl = () => {
  if (!urlForm.input) {
    urlForm.output = ''
    return
  }
  
  try {
    if (urlForm.mode === 'encode') {
      urlForm.output = encodeURIComponent(urlForm.input)
    } else {
      urlForm.output = decodeURIComponent(urlForm.input)
    }
  } catch (error) {
    urlForm.output = '解码失败，请检查输入格式'
  }
}

// 复制到剪贴板
const copyToClipboard = async (text) => {
  if (!text) {
    ElMessage.warning('没有内容可复制')
    return
  }
  
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('复制成功')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = text
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('复制成功')
  }
}
</script>

<style scoped>
.encrypt-page {
  max-width: 1000px;
  margin: 0 auto;
}

.el-tabs {
  margin-top: 20px;
}
</style> 